<template>
<!-- 定位到body -->
<!-- <teleport to=".box"> -->
  <div class="demo-pagination-block">
    <el-pagination
      v-model:currentPage="currentPage3"
      v-model:page-size="pageSize3"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="prev, pager, next, jumper"
      :total="1000"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
<!-- </teleport> -->
</template>
<script>
import { ref } from 'vue'
export default{
  name:'Pagination',
    setup(){
      const currentPage1 = ref(5)
      const currentPage2 = ref(5)
      const currentPage3 = ref(5)
      const currentPage4 = ref(4)
      const pageSize2 = ref(100)
      const pageSize3 = ref(100)
      const pageSize4 = ref(100)
      const small = ref(false)
      const background = ref(false)
      const disabled = ref(false)

      const handleSizeChange = ( number) => {
        console.log(`${number} items per page`)
      }
      const handleCurrentChange = (number) => {
        console.log(`current page: ${number}`)
      }

      return{
        currentPage3,
        pageSize3,
        small,
        disabled,
        background,
        handleSizeChange,
        handleCurrentChange
      }
    }

  }


</script>


    <style scoped>

    .demo-pagination-block{
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translate(-50%,-50%)
    }
    </style>
